<template>
	<view class="register">

		<view class="content">
			<!-- 頭部logo -->
			<view class="header">
				<image src="/static/logo.png"></image>
			</view>
			<!-- 主體 -->
			<view class="main">
				<div class="code">
					<div class="number" @tap="showPopup = true">
						<text style="padding-right: 10rpx;"> +{{ selectValue.tel }}</text>
						<u-icon name="arrow-down-fill" color="#333" size="30"></u-icon>
					</div>
					<input v-model="form['register'].data.mobile" type="text" maxlength="11" placeholder="手機號">
					</input>
				</div>

				<wInput v-model="form['register'].data.password" type="password" maxlength="11" placeholder="密碼"
					isShowPass></wInput>
				<wInput v-model="form['register'].data.invite_code" type="text"  placeholder="邀請碼">
				</wInput>
				<wInput v-model="form['register'].data.code" type="number" maxlength="4" placeholder="驗證碼" isShowCode
					ref="runCode" @setCode="getVerCode()"></wInput>

			</view>

			<wButton class="wbutton" text="註 冊" :rotate="isRotate" @click.native="startReg()"></wButton>
			
			<wButton class="wbutton" text="下载" :rotate="isRotate" @click.native="startDownload()"></wButton>

			<!-- 底部信息 -->
			<view class="footer">
				<text @tap="isShowAgree" class="cuIcon" :class="showAgree?'cuIcon-radiobox':'cuIcon-round'"> 同意</text>
				<!-- 協議地址 -->
				<navigator url="" open-type="navigate">《協議》</navigator>
			</view>
		</view>

		<u-popup v-model="showPopup" mode="bottom" width="750" :closeable="closeable" height="100%"
			close-icon-pos="top-right" close-icon-size="35">
			<index-list :isBigData="enableBigData" @select-item="selectHandler"></index-list>
		</u-popup>

		<!-- <u-action-sheet :list="list" @click="click" v-model="showPopup"></u-action-sheet> -->
		<!-- <u-select v-model="showPopup" :list="list" @confirm="confirm"></u-select> -->

	</view>
</template>

<script>
	let _this;
	import wInput from '../../components/watch-login/watch-input.vue' //input
	import wButton from '../../components/watch-login/watch-button.vue' //button
	import FormValidate from "@/shopro/validate/form";
	import schema from "@/uview-ui/libs/util/async-validator";
	import wechat from "@/shopro/wechat/wechat";
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from "vuex";
	import IndexList from "@/components/index-list/index";
	export default {
		data() {
			return {
				list: [{
						value: '86',
						label: '中国 +86'
					}, {
						value: '852',
						label: '香港 +852'
					}, {
						value: '65',
						label: '新加坡 +65'
					},
					{
						value: '61',
						label: '澳洲 +61'
					},
					{
						value: '1',
						label: '美国 +1'
					},
					{
						value: '853',
						label: '加拿大 +853'
					}, {
						value: '886',
						label: '台湾 +886'
					}, {
						value: '81',
						label: '日本 +81'
					}, {
						value: '82',
						label: '韩国 +82'
					},
					{
						value: '84',
						label: '越南 +84'
					},
					{
						value: '60',
						label: '马来西亚 +60'
					},
					{
						value: '44',
						label: '英国 +44'
					},
					{
						value: '49',
						label: '德国 +49'
					},
					{
						value: '33',
						label: '法国 +33'
					},
					{
						value: '31',
						label: '荷兰 +31'
					}
				],
				closeable: true,
				enableBigData: false,
				showPopup: false,
				selectValue: {
					tel: "86",
				},
				form: {
					// 3.註冊
					register: {
						data: {
							invite_code: "",
							mobile: "", // 手機號
							code: "", // 驗證碼
							password: "", // 密碼
							isMobileEnd: false // 手機號輸入完畢
						},
						rules: {
							code: FormValidate.code,
							mobile: FormValidate.mobile,
							password: FormValidate.password
						},
						error: {
							mobile: "", // 手機號
							code: "", // 驗證碼
							password: "" // 密碼
						}
					},
				},
				//logo圖片 base64
				logoImage: '',
				phoneData: '', // 用戶/電話
				passData: '', //密碼
				verCode: "", //驗證碼
				showAgree: true, //協議是否選擇
				isRotate: false, //是否加載旋轉
				codeText: '',
				disabledCode: false,
			}
		},
		components: {
			wInput,
			wButton,
			IndexList
		},
		mounted() {
			_this = this;
		},
		methods: {
			confirm(e) {
				this.selectValue.tel = e[0].value
				console.log(e)
			},
			selectHandler(e) {
				console.log(e, '---ee');
				this.showPopup = false;
				this.selectValue = e;
			},
			// 獲取短信驗證碼
			getSmsCode(type) {
				const that = this;
				if (!that.disabledCode) {
					that.$http(
						"common.smsSend", {
							area_code:this.selectValue.tel,
							mobile: that.form['register'].data.mobile,
							event: type
						},
						"獲取驗證碼中..."
					).then(res => {
						if (res.code === 1) {
							that.codeChange();
							that.$u.toast("驗證碼已發送，請註意查收短信");
						} else {
							that.$u.toast(res.msg);
						}
					});
				} else {
					that.$u.toast("請稍後再試");
				}
			},

			// 倒計時
			codeChange() {
				if (this.disabledCode) return;
				this.disabledCode = true;
				let n = 60;
				this.codeText = n + "s";
				const run = setInterval(() => {
					n -= 1;
					if (n < 0) {
						clearInterval(run);
					}
					this.codeText = n + "s";
					if (this.codeText < 0 + "s") {
						this.disabledCode = false;
						this.codeText = "重新獲取";
					}
				}, 1000);
			},
			isShowAgree() {
				//是否選擇協議
				_this.showAgree = !_this.showAgree;
			},
			getVerCode() {
				let that = this

				// alert(that.form['register'].data.mobile.length)
				//獲取驗證碼
				if (that.form['register'].data.mobile.length != 11) {
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '手機號不正確'
					});
					return false;
				}
				console.log("獲取驗證碼")
				this.$refs.runCode.$emit('runCode'); //觸發倒計時（壹般用於請求成功驗證碼後調用）

				this.getSmsCode('register');
				// uni.showToast({
				// 	icon: 'none',
				// 	position: 'bottom',
				// 	title: '模擬倒計時觸發'
				// });

				setTimeout(function() {
					_this.$refs.runCode.$emit('runCode', 0); //假裝模擬下需要 終止倒計時
					// uni.showToast({
					// 	icon: 'none',
					// 	position: 'bottom',
					// 	title: '模擬倒計時終止'
					// });
				}, 3000)
			},
			startDownload(){
				window.location.href = 'https://feifan.weihankeji.com/feifan.apk'
			},
			startReg() {
				//註冊
				if (this.isRotate) {
					//判斷是否加載中，避免重復點擊請求
					return false;
				}
				if (this.showAgree == false) {
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '請先同意《協議》'
					});
					return false;
				}
				if (this.form['register'].data.mobile.length != 11) {
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '手機號不正確'
					});
					return false;
				}
				if (this.form['register'].data.password.length < 6) {
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '密碼不正確'
					});
					return false;
				}
				if (this.form['register'].data.code.length != 4) {
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '驗證碼不正確'
					});
					return false;
				}

				this
					.$http(
						"user.register", {
							area_code:this.selectValue.tel,
							mobile: this.form["register"].data.mobile,
							code: this.form["register"].data.code,
							password: this.form["register"].data.password,
							invite_code: this.form["register"].data.invite_code,
						},
						"註冊中..."
					)
					.then(res => {
						if (res.code === 1) {
							this.$u.toast(res.msg);
							// this.closeAuthModal();
							uni.redirectTo({
								url: '/pages/login/login'
							})
							this.getUserInfo(res.data.token);
						}
					});

				console.log("註冊成功")
				_this.isRotate = true
				setTimeout(function() {
					_this.isRotate = false
				}, 3000)
			}
		}
	}
</script>

<style>
	@import url("../../components/watch-login/css/icon.css");
	@import url("./css/main.css");

	.code {
		margin-bottom: 20px;
		margin-top: 30rpx;
		margin-left: 5px;
		display: flex;
		align-items: center;
		height: 63px;
		background-color: linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.6));
		color: grey;
		/* background-color: #f8f8f8; */
		border: none;
		border-radius: 2.5rem;
		-webkit-box-shadow: 0 0 31px 0 rgba(43, 86, 112, .1);
		box-shadow: 0 0 31px 0 rgba(43, 86, 112, .1);
		// border-bottom: 1rpx solid #999;

		.number {
			padding: 0 10rpx;
			border-right: 1px solid #f8f8f8;
			margin-right: 5px;
			// border-radius: 20px;

		}
	}
</style>